<template>
	<el-dialog v-loading="loading" :title="station_id ? '编辑用户代理' : '添加用户代理'" :visible.sync="dialogVisible"
		width="600px">
		<div class="description">
			<div>
				<el-form size="small" :model="formValidate" ref="formValidate" :rules="rules" label-width="140px">
					<el-form-item label="代理类别：" prop="business">
						<el-select v-model="formValidate.business" placeholder="请选择" class="selWidth" clearable>
							<el-option v-for="item in categoryList" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="代理城市：" prop="city_name" required>
						<!-- <el-select v-model="formValidate.city_name" placeholder="请选择" class="selWidth" filterable clearable>
              <el-option v-for="item in cityList" :label="item.label" :value="item.key" />
            </el-select> -->
						<el-cascader ref="cityLabel" :options="cityList"  v-loading='loading' :props="cityprops" v-model="formValidate.city_name"
							placeholder="请选择" :show-all-levels="true" clearable @change="handleCityChange($event)">
						</el-cascader>
						<!-- //expand-change 当展开节点发生变化时触发    回调：各父级选项值组成的数组
						// :show-all-levels="false" 选中的面板只展示最后一级 -->
					</el-form-item>
				</el-form>
				<span class="dialog-footerdialog-footer">
					<el-button style="width: 100%;" type="primary" @click="submitForm('formValidate')">确认</el-button>
				</span>
			</div>
		</div>
	</el-dialog>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		createDailiApi,
		getCityList
	} from '@/api/systemForm'
	import {
		changeDailiApi,
	} from '@/api/user'
	export default {
		name: 'setAgent',
		props: {

		},
		data() {
			return {
				dialogVisible: false,
				loading: false,
				listLoading: true,
				modalMap: false,
				station_id: "",
				formValidate: {},
				categoryList: [],
				rules: {
					business: [{
						required: true,
						message: '请选择代理类别',
						trigger: 'change'
					}],
					city_name: [{
						required: true,
						message: '请选择代理城市',
						trigger: 'change'
					}]
				},
				cityList: [], // 一开始的省份
				selarea: [], //选中的数据
				area: [],
				loading: false,
				loadignArr: [true, true, false],
				cityprops: {
					lazy: true,
					lazyLoad: this.lazyLoad,
					multiple: false, //是否多选
					value: 'id', //指定选项的值为选项对象的某个属性值
					label: 'name', //指定选项标签为选项对象的某个属性值
					children: 'list', //指定选项的子选项为选项对象的某个属性值
					checkStrictly: true //是否严格的遵守父子节点不互相关联
				},
				cityInfo:{}
			}
		},
		 watch: {
		    loadignArr: {
		      handler(val) {
		        const result = val.includes(true)
		        if (result) {
		          this.loading = true
		        } else {
		          this.loading = false
		        }
		      }
		
		    }
		  },
		mounted: function() {
			this.getCityList()
		},
		methods: {
			lazyLoad(node,resolve){
				// console.log(node,resolve)
				let {data,level} = node;
				let pid = data.id;
				let datas = []
				if(level==3)return resolve([])
				setTimeout(()=>{
					getCityList(pid)
						.then(res => {
							datas = res.data
							this.cityList.map((item,i)=>{
								if(item.id==pid){
									item.list = res.data
								}
							})
							resolve(datas)
						})
						.catch(err => {
							this.$message.error(err.message)
						})
				},200)
			},
			handleCityChange(val) {
				let idArea;
				let sizeArea;
				if (!val) {
					idArea = null;
					sizeArea = 0;
				} else if (val.length === 1) {
					idArea = val[0];
					sizeArea = val.length; 
				} else if (val.length === 2) {
					idArea = val[1];
					sizeArea = val.length;
				}
				let list = this.cityList;
				const checkedNodes = this.$refs['cityLabel'].getCheckedNodes()
				this.cityInfo = checkedNodes[0].data
				// console.log(checkedNodes[0],'checkednodes')
			},
			// 获取详情数据  代理类别  代理城市
			getDetails(id) {
				this.dialogVisible = true
				this.station_id = id
				changeDailiApi(id)
					.then(res => {
						let info = res.data
						this.formValidate = {
							business: info.rule[0].options && info.rule[0].value,
							city_name: ""
						}
						this.categoryList = info.rule[0].options
					})
					.catch(res => {
						this.$message.error(res.message)
					})
			},
			// 获取城市列表
			getCityList() {
				getCityList()
					.then(res => {
						this.cityList = res.data
					})
					.catch(res => {
						this.$message.error(res.message)
					})
			},
			submitForm(name) {
				// console.log(this.cityInfo,'cityInfo')
				this.$refs[name].validate(valid => {
					if (valid) {
						//代理类型daili_id，city_id  城市id，city_name 城市名称，path 城市id列表
						let data = {
							daili_id:this.formValidate.business,
							city_id:this.cityInfo.id,
							path:this.cityInfo.path,
							city_name:this.cityInfo.name
						}
						createDailiApi(this.station_id,data).then(res => {
							this.dialogVisible = false
							this.$message.success(res.message)
							console.log(res,'设置成功')
							this.$emit('getList', '');
						}).catch(({
							message
						}) => {
							console.log(message)
							this.$message.error(message)
						})
							
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.selWidth {
		width: 100%;
	}
</style>
